<template>
  <div>
    <Header_h />
    <div class="Breadcrumbs-w">
      <div class="container">
        <el-button size="mini" class="pubBtn3" type="button" @click="$router.push('/web/home')">返回首页</el-button>
      </div>
    </div>
    <div class>
      <div class="container">
        <el-main>
          <el-row type="flex" style="margin-top: 20px;">
            <!-- <el-col :span="10">
              <div style="display: flex;justify-content: flex-start;align-items: center;">
                <p class="right" v-if="page.total">共{{ page.total }}条专利信息</p>
                <el-input clearable v-model="search" style="width: 300px" placeholder="搜索公司、联系人" @keyup.enter.native="searchDocking"  @clear="searchDocking"
                  class="input-with-select">
                  <el-button @click="searchDocking" slot="append" style="
                                      background-color: #45a321;
                                      color: #fff;
                                      border-radius: 0;
                                    ">搜索</el-button>
                  <i slot="prefix-icon" class="el-icon-search"></i>
                </el-input>
              </div>
            </el-col> -->
            <el-col >
              <el-select v-model="sort_column" placeholder="请选择排序" @change="columnChange" clearable >
                <el-option v-for="item in columnOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-table id="table" :header-cell-style="{ background: '#F3F8FE' }" @row-click="rowClick" :data="tableData"
            border style="width: 100%; margin: 20px 0">
            <el-table-column prop="ano" align="center" width="150"  label="缩略图">
              <template slot-scope="scope" >
                <div style="display: flex;justify-content: center;">
                  <img v-if="scope.row.imgo != '暂无数据'" :src="scope.row.imgo" alt="" style="width: 100px; height: 100px; margin-right: 10px;">
                  <div v-else>{{ scope.row.imgo }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="ano" align="center" label="申请号"></el-table-column>
            <el-table-column prop="tic" align="center" label="专利标题" width="300"></el-table-column>
            <el-table-column align="center" label="当前权利状态">
              <template slot-scope="scope">
                <el-tag style="border: none" size="small" effect="dark" color="#4ba22f" v-if="scope.row.status == '有效'">{{
                  scope.row.status }}</el-tag>
                <el-tag style="border: none" size="small" effect="dark" color="#da7b21" v-if="scope.row.status == '在审'">{{
                  scope.row.status }}</el-tag>
                <el-tag style="border: none" size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '无效'">{{
                  scope.row.status }}</el-tag>
                <!--  <el-tag style="border:none;"  size="small" effect="dark" color="#4ba22f" v-if="scope.row.status == '部分无效'" >{{scope.row.status}}</el-tag>
          <el-tag style="border:none;"  size="small" effect="dark" color="#4ba22f" v-if="scope.row.status == '权利恢复'" >{{scope.row.status}}</el-tag>
          <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '未缴年费'" >{{scope.row.status}}</el-tag>
          <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '撤回'" >{{scope.row.status}}</el-tag>
          <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '驳回'" >{{scope.row.status}}</el-tag>
          <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '期限届满'" >{{scope.row.status}}</el-tag>
          <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '避重授权'" >{{scope.row.status}}</el-tag>
          <el-tag style="border:none;"  size="small" effect="dark" color="#6c778b" v-if="scope.row.status == '全部撤销'" >{{scope.row.status}}</el-tag>
          <el-tag style="border:none;"  size="small" effect="dark" color="#da7b21" v-if="scope.row.status == '实质审查'" >{{scope.row.status}}</el-tag>
          <el-tag style="border:none;"  size="small" effect="dark" color="#da7b21" v-if="scope.row.status == '公开'" >{{scope.row.status}}</el-tag>
                <el-tag style="height:25px;line-height:25px; margin-right:5px;margin-bottom:5px;" size="small" v-for="(t,s) in scope.row.event" :key="s" v-if="scope.row.event.length > 0" effect="plain" type="">{{t}}</el-tag>-->
              </template>
            </el-table-column>
            <el-table-column prop="pdt" align="center" label="专利类型"></el-table-column>
            <el-table-column prop="apc" align="center" label="当前申请(专利权)人"></el-table-column>
            <el-table-column prop="inc" align="center" label="发明人"></el-table-column>
            <el-table-column prop="ad" align="center" label="申请日"></el-table-column>
            <el-table-column prop="pd" align="center" label="公告(公开)日"></el-table-column>
            <el-table-column prop="pns" align="center" label="公开号" width="130"></el-table-column>
            <!-- <el-table-column
        prop="crc"
        align="center"
        width="160"
        label="代理机构">
            </el-table-column>-->
          </el-table>
          <div class="pagination">
            <el-pagination background v-if="page.total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :current-page="page.page" :page-size="page.page_row"
              layout="total, prev, pager, next, jumper" :total="parseInt(page.total)" align="left"></el-pagination>
            <!-- parseInt(page.total/10) -->
          </div>
        </el-main>
      </div>
    </div>
    <Footer />
    <rightMenu @moveTo="moveTo" />
  </div>
</template>
 
<script>
import { search } from "@/api";
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import rightMenu from "@/components/web/rightMenu";

export default {
  components: {
    Footer,
    Header_h,
    rightMenu
  },
  data() {
    return {
      tableData: [],
      currentPage: 1, //默认显示页面为1
      pagesize: 10, //    每页的数据条数
      page: [],
      val: null,
      search: "",
      sort_column: '-AD',
      type: null,
      items: [
        { type: "", label: "发明专利" },
        { type: "", label: "实用类型" },
        { type: "", label: "外观设计" },
      ],
      columnOptions: [
        { value: '-AD', label: '申请日从新到旧' },
        { value: '+AD', label: '申请日从旧到新' },
        { value: '-PD', label: '公开日从新到旧' },
        { value: '+PD', label: '公开日从旧到新' },
      ],
    };
  },
  // beforeRouteEnter: (to,from,next) => {
  //    // console.log(to)
  // },
  mounted() {
    try {
      if (this.$route.query.val) {
        this.val = this.$route.query.val;
        search({
          keywords: this.$route.query.val,
          sort_column: this.sort_column
        }).then((res) => {
          if (res.patent_list) {
            this.tableData = res.patent_list;
            this.page = res.page
            if (res.page.total >= 10000) {
              this.page.total = 10000
            }
          } else {
            this.tableData = []
            this.page = {
              page: 1,
              page_row: 10,
              total: "0"
            }
          }
        });
      }
    } catch (e) {
      this.$message(err.message);
    }
  },
  methods: {
    moveTo() {
      window.scrollTo(0, 0);
    },
    rowClick(row, event, column) {
      const pid = row.pid;
      const ano = row.ano;
      sessionStorage.setItem("pc", 0)
      this.$router.push({ path: "/detail", query: { pid: pid, type: 1, pc: 1, } });
    },
    async searchDocking() {
      try {
        const res = await search({
          sort_column: this.sort_column,
          keywords: `${this.val}${this.search ? ',' + this.search : ""}`,
        });
        if (res.patent_list) {
          this.tableData = res.patent_list;
          this.page = res.page
          if (res.page.total >= 10000) {
            this.page.total = 10000
          }
        } else {
          this.tableData = []
          this.page = {
            page: 1,
            page_row: 10,
            total: "0"
          }
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const res = await search({
          page: size,
          keywords: `${this.val}${this.search ? ',' + this.search : ""}`,
          sort_column: this.sort_column,

        });
        if (res.patent_list) {
          this.tableData = res.patent_list;
          this.page = res.page
          if (res.page.total >= 10000) {
            this.page.total = 10000
          }
        } else {
          this.tableData = []
          this.page = {
            page: 1,
            page_row: 10,
            total: "0"
          }
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async columnChange() {
      try {
        const res = await search({
          keywords: `${this.val}${this.search ? ',' + this.search : ""}`,
          sort_column: this.sort_column,
          page: 1
        })
        if (res.patent_list) {
          this.tableData = res.patent_list;
          this.page = res.page
          if (res.page.total >= 10000) {
            this.page.total = 10000
          }
        } else {
          this.tableData = []
          this.page = {
            page: 1,
            page_row: 10,
            total: "0"
          }
        }
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const res = await search({
          page: currentPage,
          sort_column: this.sort_column,
          keywords: `${this.val}${this.search ? ',' + this.search : ""}`,
        });
        this.tableData = res.patent_list;
        this.page = res.page;

        if (res.page.total >= 10000) {
          this.page.total = 10000
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    searchVal(val) {
      try {
        this.val = val;
        if (val) {
          search({
            keywords: val,
          }).then((res) => {
            // console.log(res == "" || res == null);
            if (res == "" || res == null) {
              this.tableData = [];
              this.page = 0;
            } else {
              this.tableData = res.patent_list;
              this.page = res.page;
              if (res.page.total >= 10000) {
                this.page.total = 10000
              }
            }
          });
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    // changeVal(val){

    // }
  },
};
</script>

<style scoped >
.el-main {
  padding: 0;
  margin-left: 0;
}

.pagination {
  margin: 15px 0;
}

.el-pagination {
  text-align: right;
}

.Breadcrumbs-w {
  background-color: #f4f5f7;
  width: 100%;
  margin-top: 80px;
  padding: 10px 0;
}

.right {
  margin-right: 10px;
  height: 40px;
  line-height: 40px;
}

@media (max-width: 1600px) {
  #table {
    width: 95% !important;
  }
}
</style>
